﻿<div id="pasos" class="row">
    <div class="col-xs-8 col-sm-4 col-md-4 inactivo">
        <h4>
            1</h4>
        <strong>Selección de Servicio</strong>
    </div>
    <div class="col-xs-2 col-sm-4 col-md-4 activo">
        <h4>
            2</h4>
        <strong class="hidden-xs">Carga de pasajeos</strong>
    </div>
    <div class="col-xs-2 col-sm-4 col-md-4 inactivo">
        <h4>
            3</h4>
        <strong class="hidden-xs">Confirmacion y pago</strong>
    </div>
</div>
<div class="row ">
    <div class="pasaje-barra">
        <div class="pasaje-barra-texto">
            <strong id="Origenida"></strong>
            <br>
            <strong id="DestinoVuelta"></strong>
        </div>
    </div>
</div>
<div class="row BarraSubtotal">
    <div class="col-xs-6 col-sm-3 col-md-2 subtotal-titulo">
        Precio (ARS)</div>
    <div class="col-xs-6 col-sm-9 col-md-10">
        <b class="precio pull-right"><span data-bind="text: '$ ' + PrecioFinal() + ',00'"></span></b>
    </div>
</div>
<div>
    <div id="referencias-butacas">
        <ul class="list-inline">
            <li class="titulo">Referencias</li>
            <li class="disponible">Disponible</li>
            <li class="ocupado">Ocupado</li>
            <li class="seleccionado">Seleccionado</li>
        </ul>
    </div>
</div>

<div id="divSeleccion-butacas" class="row">
    <div class="col-xs-8 col-sm-6 col-md-3">
        <div class="omnibus">
            <div class="omnibus-titulo">
                Primer piso</div>
            <div class="omnibus-interno omnibus-interno-arriba">
                <ul id="ul-listPrimerPiso" class="list-inline listaButacas">                
                
                    <li></li>
                    <li></li>
                    <li class="tv" title="TV"> </li>
                    <li> </li>
                    <li> </li>
                    <li class="disponible"><a href="#">1</a></li>
                    <li class="disponible"><a href="#">2</a></li>
                    <li> </li>
                    <li class="disponible"><a href="#">3</a></li>
                    <li class="disponible"><a href="#">4</a></li>
                    <li class="disponible"><a href="#">5</a></li>
                    <li class="disponible"><a href="#">6</a></li>
                    <li> </li>
                    <li class="disponible"><a href="#">7</a></li>
                    <li class="disponible"><a href="#">8</a></li>
                    
                    
                    <li class="disponible"><a href="#">9</a></li>
                    <li class="disponible"><a href="#">10</a></li>
                    <li> </li>
                    <li class="disponible"><a href="#">11</a></li>
                    <li class="disponible"><a href="#">12</a></li>
                    <li class="disponible"><a href="#">13</a></li>
                    <li class="disponible"><a href="#">14</a></li>
                    <li> </li>
                    <li class="disponible"><a href="#">15</a></li>

        



                </ul>
            </div>
        </div>
    </div>
    <div class="col-xs-8 col-sm-6 col-md-3">
        <div class="omnibus">
            <div class="omnibus-titulo">
                Segundo piso</div>
            <div class="omnibus-interno omnibus-interno-arriba">
                <ul id="ul-listSegundoPiso" class="list-inline listaButacas">
                    <li></li>
                    <li></li>
                    <li class="tv" title="TV"> </li>
                    <li> </li>
                    <li> </li>
                    <li class="disponible"><a href="#">16</a></li>
                    <li class="disponible"><a href="#">17</a></li>
                    <li> </li>
                    <li class="disponible"><a href="#">18</a></li>
                    <li class="disponible"><a href="#">19</a></li>
                    <li class="disponible"><a href="#">20</a></li>
                    <li class="disponible"><a href="#">21</a></li>
                    <li> </li>
                    <li class="disponible"><a href="#">22</a></li>
                    <li class="disponible"><a href="#">23</a></li>
                    
                    
                    <li class="disponible"><a href="#">24</a></li>
                    <li class="disponible"><a href="#">25</a></li>
                    <li> </li>
                    <li class="disponible"><a href="#">26</a></li>
                    <li class="disponible"><a href="#">27</a></li>
                    <li class="disponible"><a href="#">28</a></li>
                    <li class="disponible"><a href="#">29</a></li>
                    <li> </li>
                    <li class="disponible"><a href="#">30</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-xs-11 col-sm-11 col-md-6">
        <div id="panelCarga-butacas-pasajeros">
            <div class="titulo-panel">
                Carga de pasajeros</div>
            <div>
                <div class="importante-interno" style="display: none">
                    Se encontraron 5 pasajeros con ese número de documento. Por favor, seleccioná el
                    correcto.</div>
            </div>
            <div class="form-busqueda-pasajeros">
                <form class="form-inline" role="form">
                <div class="form-group">
                    <label class="sr-only" for="txtNumDniPasajero">
                        Numero DNI</label>
                    <input type="text" class="form-control" id="txtNumDniPasajero" placeholder="Numero DNI">
                </div>
                <button type="submit" class="btn btn-default">
                    Buscar</button>
                </form>
            </div>
            <div id="div-Lista-Pasajeros-Added" data-bind="foreach: butacasLista">
                <ul class="list-inline butacas-pasajeros-pasajero-Lista">
                    <li class="butacas-pasajeros-pasajero-butaca"><span data-bind="text: NumeroButaca"></span>
                    </li>
                    <li class="butacas-pasajeros-pasajero-nombre"><span data-bind="text: NombrePasajero">
                    </span></li>
                    <li class="butacas-pasajeros-pasajero-precio"><span data-bind="text: precio"></span></li>
                    <li>
                        <button class="btn btn-mini btn-danger pull-right" data-bind="click: $parent.eliminarPasajero">
                             <i class="fa fa-times"></i>
                        </button>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</div>



<div class="row BarraSubtotal">
    <div class="col-xs-4 col-sm-2 col-md-2 subtotal-titulo">
        Subtotal</div>
    <div class="col-xs-8 col-sm-10 col-md-10">
        <b class="precio pull-right"><span data-bind="text: '$ ' + PrecioFinal() + ',00'"></span>
        </b>
    </div>
</div>
<div id="divBarraConfirmar" class="row">
    <a data-bind="page-href: '../butacasDisponibles'" class="btn btn-danger pull-right btn-lg">
        Comprar</a>
</div>
